<template>
	<view class="container">
		<Navbar title="报告查询" bgColor="#6A1CF3" leftIconColor="#fff" :titleStyle="{color: '#fff'}">
			<template #right>
				<navigator url="/details/Credit/index?order=6542a8f7251646f1a810" class="href d-flex">
				<!-- <navigator class="href d-flex"> -->
					报告示例
					<Icon name="arrow-right" class="relative href_icon" color="#fff" size="28rpx" />
				</navigator>
			</template>
		</Navbar>
		
		<view class="banner"></view>
		
		<view class="box">
			<RuleForm class="mb-30" :type="pageType" btnText="立即查询￥39.8" />
			
			<view class="card relative p-30 d-flex">
				<view class="card_title mb-30">
					<image mode="widthFix" class="card_title_icon" src="/static/image/credit/card_left.png"></image>
					<text class="ml-30 mr-30">报告主要内容</text>
					<image mode="widthFix" class="card_title_icon" src="/static/image/credit/card_right.png"></image>
				</view>
				
				<view class="list d-flex">
					<view :class="['list_item d-flex', item.id % 2 !== 0 ? 'mr-30' : '', [9, 10].includes(item.id) ? '' : 'mb-30']" v-for="item of list" :key="item.id">
						<image mode="widthFix" class="list_item_icon mr-10" :src="`/static/image/credit/icon${item.id}.svg`" />
						<text class="list_item_title">{{ item.title }}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {reactive, ref} from 'vue'
	import { onLoad } from "@dcloudio/uni-app";
	import Icon from '@/components/Icon/index.vue'
	import Navbar from '@/components/Navbar/index.vue'
	import RuleForm from '@/query/components/ruleForm.vue'
	
	const pageType = ref(1)
	onLoad((options) => {
		pageType.value = +options.pageType || 1
	})
	
	const list = reactive([
		{
			title: '基本信息',
			id: 1
		},
		{
			title: '银行贷款申请记录',
			id: 2
		},
		{
			title: '非银行贷款申请记录',
			id: 3
		},
		{
			title: '借贷记录',
			id: 4
		},
		{
			title: '失信行为',
			id: 5
		},
		{
			title: '信用异常行为',
			id: 6
		},
		{
			title: '法院案件',
			id: 7
		},
		{
			title: '执行案件',
			id: 8
		},
		{
			title: '限制高消费信息',
			id: 9
		}
	])
</script>

<style scoped lang="scss">
	@import '@/query/scss/index.scss';
	
.container {
	background-color: #F8F7FD;
	
	.href {
		color: #fff;
		font: {
			size: 24rpx;
		}
		
		::v-deep {
			.navigator-wrap {
				display: flex;
				align-items: center;
			}
		}
		
		&_icon {
			top: 2rpx;
		}
	}
	
	.banner {
		padding: 250rpx 25rpx 30rpx;
		background: {
			image: url('@/static/image/credit/banner.png');
			size: cover;
			position: center;
			repeat: no-repeat;
			color: #6A1CF3;
		};
	}
	
	.box {
		padding: 0 25rpx;
		overflow: visible;
		
		.ruleForm {
			top: -50rpx;
			box-shadow: 0 0 10rpx rgba(0, 0, 0, .1);
		}
		
		.card {
			flex-direction: column;
			top: -50rpx;
			
			&_title {
				margin-left: auto;
				margin-right: auto;
				flex-direction: row;
				align-items: center;
				justify-content: center;
				
				&_icon {
					width: 70rpx;
				}
				
				text {
					color:#404040;
					font: {
						size: 30rpx;
						weight: bold;
					}
				}
			}
		
			.list {
				padding: 25rpx 0;
				flex-wrap: wrap;
				
				&_item {
					padding: 28rpx 25rpx;
					width: calc(50% - 15rpx);
					align-items: center;
					border-radius: 12rpx;
					box-sizing: border-box;
					background: linear-gradient(to right, #F3F5FE, #FFF6F9);
					
					&_icon {
						width: 35rpx;
					}
					
					&_title {
						font: {
							size: 22rpx;
						}
					}
				}
			}
		}
	}
}
</style>
